<template>
	<view class="container">
		<Masks v-if="show_mask" @hideClick="hideMask()"></Masks>
		<!-- 头像及其他 -->
		<view style="position: sticky;z-index: 2;top: 0upx;background: #F5F5F5">
			<view class="avatar">
				<view class="left-avatar">
					<image :src="user_shop.avatar"></image>
					<text class="name">{{user_shop.nickname}}</text>
				</view>
				<view v-if="user_shop.is_subscribe==0" @click="subscribe(1,user_shop)" class="right-copy"><text class="cell-icon yticon icon-jia1 add_btn"></text><text class="dingyue">订阅</text></view>
				<view v-else class="right-copy had" @click="subscribe(2,user_shop)"><text class="dingyue">已订阅</text></view>
			</view>
			<view class="navbar">
				<view v-for="(item, index) in navList" :key="index" class="nav-item" 	@click="tabClick(index)">
					<view class="child_item" :class="{current: tabCurrentIndex === index}">{{item.text}}</view>
				</view>
			</view>
		</view>
	
		<view class="main">
			<view class="main-content" v-for="(item,index) in list" :key="index">
				
				<view class="desc" @click="toDetail(item.id,item.publish_user_info.id)">{{item.description}}</view>
				<view class="price">
					<view class="price-detail" v-if="item.goods_list2.length>=2">¥ {{item.goods_list2[0].price}}~{{item.goods_list2[item.goods_list.length-1].price}}</view>
					<view class="price-detail" v-else>￥{{item.goods_list2[0].price}}</view>
					<view class="price-time">{{item.time_str}}发布</view>
				</view>
				<view class="img-list">
					<view class="img-container" @click="toDetail(item.id,item.publish_user_info.id)">
						<view v-for="(_item, _index) in item.goods_list[0].pics" :key="_index" class="img-item">
						        <image v-if="_item.type==1" :src="_item.src" class="img" ></image>
						        <video v-else :src="_item.src" class="video" :controls="false"  :show-center-play-btn="false"></video>
						        <text v-if="_item.type==2" class="cell-icon yticon icon-player player" ></text>
						</view>
					</view>
				</view>
				
				<view class="danmu" @click="toDetail(item.id,item.publish_user_info.id)" :style="{height:item.recent_list.length>0?(item.recent_list.length*51)+'rpx':'0rpx',margin:item.recent_list.length>0?'24rpx':'0rpx'}">
					<view class="danmu-list" v-for="(_item, _index) in item.recent_list" :key="_index">
						<view style="display: flex;align-items: center;flex:1">
							<view style="font-size: 24rpx;width: 56rpx;">{{_item.dragon_serial}}</view>
							<view style="margin-left: 10rpx;"><image style="width: 30rpx;height: 30rpx;border-radius: 50%" :src="_item.user_info.avatar"></image></view>
							<view class="danmu-nick">{{_item.nickname}}:</view>
							<view style="font-size: 24rpx;margin-left: 10rpx;color: #999999;">{{_item.time_str}}</view>
							<view class="danmu-content">{{_item.first_title}}</view>
						</view>
						
						<view style="font-size: 24rpx;">+{{_item.total_num}}</view>
					</view>
				</view>
				<view class="bottom-show">
					<view class="bottom-status" v-if="item.status_val==1" style="color: #23A948;">{{item.status_tip}}</view>
					<view class="bottom-status" v-if="item.status_val==2" style="color: #666666;">{{item.status_tip}}</view>
					<view class="bottom-status" v-if="item.status_val==3" style="color: #FA6401;">{{item.status_tip}}</view>
					<view v-if="hasLogin&&item.publish_user_info.id==userInfo.user_info.id" @click="showOpMenu(item)"><text class="cell-icon yticon icon-more" style="display: block;"></text></view>
					<view class="right-copy" style="margin: 20rpx;padding: 6rpx 24rpx;" @click="share(item.id)"><text class="cell-icon yticon icon-weixin add_btn"></text><text class="dingyue">分享</text></view>
				</view>
				
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
			<view v-if="show_share" class="bottom_menu" style="background: #F5F5F5;z-index: 3;">
				<view class="share-list">
					<view class="share-item" @click="openCard()">
						<image src="/static/temp/share_wechat.png"></image>
						<text>分享到微信</text>
					</view>
					<view class="share-item" @click="openPoster()">
						<image src="/static/temp/share_moment.png"></image>
						<text>生成发圈海报</text>
					</view>
				</view>
				<view class="bottom-btn-share b-t" @click="cancelShare()">取消</view>
			</view>
			<view v-show="show_menu" class="bottom_menu">
				<view class="op_menu_child" @click="editDrag()">编辑接龙</view>
				<view class="op_menu_child" @click="endDrag()">结束接龙</view>
				<view class="op_menu_child" @click="copyTo()" v-if="can_copy==0">复制接龙</view>
				<view class="op_menu_child" @click="deleteDrag()">删除接龙</view>
				<view class="op_menu_child" @click="toExport()">数据统计</view>
				<view class="op_menu_child" @click="exportData()">导出数据</view>
				<view class="op_menu_child" @click="showOpMenu()">取消</view>
			</view>
			<!-- 分享卡片 -->
			<view v-if="show_card" style="position: fixed; z-index: 3; left: 0; right: 0;top: 0;text-align: center; color: #FFFFFF; padding: 20rpx; font-size: 32rpx; font-weight: 800;">分享卡片预览</view>
			<view v-if="show_card" class="share_card">
				
				<view style="display: flex;align-items: center;	padding: 30rpx;">
					<image src="/static/temp/kt.png" style="width: 48rpx;height: 48rpx;"></image>
					<text style="padding: 0rpx 10rpx;color: #333333;font-size: 28rpx;">好团团接龙</text>
				</view>
				<view style="padding: 0rpx 30rpx;">{{share_data[0].title}}</view>
				<swiper style="height: 560rpx;margin: 20rpx " @change="changeShare" :indicator-dots="true" indicator-active-color="#23A948">
					<swiper-item v-for="(item,index) in share_data" :key="index">
						<image :src="item.share_img"  mode="aspectFit"></image>
					</swiper-item>
				</swiper>
				<view style="margin: 30rpx;">
					<button style="height: 70rpx !important;line-height: 70rpx !important;background: #23A948;color:#FFFFFF !important;font-size: 28rpx;"  open-type="share">立即分享</button>
				</view>
			</view>
			<view v-if="show_poster" style="position: fixed; z-index: 3; left: 0; right: 0;top: -12rpx;text-align: center; color: #FFFFFF; padding: 20rpx; font-size: 32rpx; font-weight: 800;">分享海报预览</view>
			<view v-if="show_poster" style="position: fixed;top:32rpx;left: 0;right: 0;margin: 20rpx;z-index: 3;text-align: center;">
				<image style="height: 900rpx;" show-menu-by-longpress :src="share_poster" mode="heightFix"></image>
				<view style="margin:0rpx 40rpx 6rpx 40rpx;">
					<button style="height: 70rpx !important;line-height: 70rpx !important;background: #23A948;color:#FFFFFF !important;font-size: 28rpx;" @click="savePic(share_poster)">保存图片</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Masks from '@/components/mask';
	import {mapMutations,mapState} from 'vuex';
	import Api from '@/common/api';
	export default{
		components: {
			Masks
		},
		data(){
			return {
				currrent_id:0,
				show_menu:false,
				show_mask:false,
				show_share:false,
				timer:null,
				user_shop:{},
				leader_id:0,
				page: 1,
				size: 4,
				loaded:false,
				more_data: true,
				loadingType:'more',
				list:[],
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '全部',
					},
					{
						state: 1,
						text: '进行中',
					},
					{
						state: 2,
						text: '近30天热销',
					}				
				],
				dragon_id:0,
				show_card:false,
				share_data:{},
				current_share:{},
				show_poster:false,
				share_poster:'',
				can_copy:0
				
			}
		},
		onLoad(){
			let option=this.$api.currentPageOption();
			this.leader_id=option.id;
			
			this.userShop()
			this.more_data=true;
			this.page=1;
			this.list=[];
			this.loadList();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onShow(){
			this.show_share=false;
			this.show_mask=false;
			this.show_menu=false;
			this.show_card=false;
		},
		onShareAppMessage(res){
			return {
				title:this.current_share.title,
				path:'/pages/record/detail?id='+this.current_share.dragon_id+'&leader_id='+this.current_share.user_id,
				imageUrl:this.current_share.share_img,
				
			}
			
		},
		beforeDestroy(){
			this.stopTimer();
		},
		onHide(){
			this.stopTimer();
		},
		onReachBottom(){
			this.loadList();
			
		},
		methods: {
			...mapMutations(['login']),
			savePic(url){
				let that =this;
				uni.downloadFile({
					url:url,
					success:((res)=>{
						uni.saveImageToPhotosAlbum({
							filePath:res.tempFilePath,
							fail:((err)=>{
								if(err.errMsg!='saveImageToPhotosAlbum:fail cancel'){
									that.$api.msg(`保存图片失败`)
								}
							}),
							success:(()=>{
								that.$api.msg(`图片已保存`)
								that.hideMask()
							})
						})
					}),
					fail:((err)=>{
						
						that.$api.msg(`保存图片失败`)
					})
				})
				
			},
			changeShare(e){
				this.current_share = this.share_data[e.detail.current]
			},
			async openPoster(){
				this.show_card=false;
				this.show_poster=true;
				let data = await Api.apiCall('post',Api.apiName.create_share_poster,{dragon_id:this.dragon_id});
				if(!data){
					return;
				}
				this.share_poster=data.data;
			},
			async openCard(){
				this.show_card=true;
				this.show_poster=false;
				let data = await Api.apiCall('post',Api.apiName.create_share_card,{dragon_id:this.dragon_id});
				if(!data){
					return;
				}
				this.share_data =data.data;
				if(data.data.length>0){
					this.current_share =data.data[0]
				}
			},
			hideMask(){
				this.show_mask=false;
				this.show_menu=false;
				this.show_share=false;
				this.show_card=false;
				this.show_poster=false;
			},
			toDetail(id,leader_id){
				uni.navigateTo({
					url:'/pages/record/detail?id='+id+'&leader_id='+leader_id
				})
			},
			showOpMenu(item=0){
				let that = this;
				this.show_mask=!this.show_mask;
				this.show_menu=!this.show_menu;
				if(item!=0){
					this.currrent_id=item.id;
					this.can_copy=item.can_copy;
					uni.setStorage({
						key:'edit_drag',
						data:that.saveItemOption(item)
					})
				}
				
			},
			saveItemOption(item){
				return {address:item.address,cluster_id:item.cluster_id,description:item.description,end_time:item.end_time,start_time:item.start_time,goods_list:item.goods_list,id:item.id,latitude:item.latitude,longitude:item.longitude,send_msg:item.send_msg,title:item.title,user_id:item.user_id}
			},
			//顶部tab点击
			tabClick(index){
				this.tabCurrentIndex = index;
				this.page=1;
				this.more_data=true;
				this.list=[];
				this.loadList();
			},
			async subscribe(type,item){
				let params = {
					s_id:item.id,
				};
				let data = await Api.apiCall('post',Api.apiName.subscribe,params,true);
				if(!data){
					return;
				}
				if(type==1){
					this.$api.msg(`订阅成功`)
				}else{
					this.$api.msg(`已退订`)
				}
				this.user_shop.is_subscribe=type==1?1:0; 
			},
			//分享
			share(id){
				this.show_mask=true;
				this.show_share=true;
				this.dragon_id=id;
			},
			cancelShare(){
				this.show_mask=false;
				this.show_share=false;
				this.show_card=false;
				this.show_poster=false;
			},
			async userShop(){
				let data = await Api.apiCall('get',Api.apiName.user_shop_info,{user:this.leader_id},true);
				if(!data){
					return;
				}
				this.user_shop = data.data;
			},
			async loadList(){
				if(!this.more_data ||this.loadingType === 'loading'){
					return;//没有数据不请求或防止重复加载
				}
				this.loaded = false;
				this.loadingType = 'loading';
				let params = {
					user:this.leader_id,
					page: this.page,
					size: this.size,
				};
				if(this.tabCurrentIndex==1){params.now=1};
				if(this.tabCurrentIndex==2){params.order=1}
				let data = await Api.apiCall('get',Api.apiName.shop_drag_list,params);
				if(!data){
					this.loadingType='noMore'
					this.loaded = true;
					return;
				}
				this.list = this.list.concat(data.data)
				//定时加载订单开启
				this.stopTimer();
				this.startTimer()
				// loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
				this.loaded=true;
				if (data.data.length > 0 && data.data.length == this.size) {
					this.page++;
					this.loadingType = 'more';
				} else {
					this.loadingType = 'nomore';
					this.more_data = false;
				
				}
			},
			startTimer() {
			 this.timer = setInterval(() => {
			    this.list.forEach(async(item) => {
					//只定时加载正在接龙的数据
					if(item.status_val==1){
						this.updateListItem(item.id);
					}
					
			    });
			  }, 60000); // 每10秒更新一次
			},
			stopTimer() {
			  if (this.timer) {
			    clearInterval(this.timer);
			  }
			},
			async updateListItem(id){
				let res = await Api.apiCall('get',Api.apiName.serial_list,{dragon_id:id,page:1,size:3},true);
				if(!res){//没有数据不更新
					return;
				}
				let updatedItem = res.data;
				this.list.map(item => {
					if(item.id === id){
						item.recent_list=updatedItem
					}
				});
			},
			copyTo(){
				let editDrag = uni.getStorageSync('edit_drag')||'';
				if(editDrag){
					editDrag.id=0;
					uni.setStorage({
						key:'edit_drag',
						data:editDrag
					})
				}
				setTimeout(function(){
					uni.switchTab({
						url:'/pages/index/create'
					})
				},500)
			},
			deleteDrag(){
				let that = this;
				uni.showModal({
					content:'确定删除该接龙活动吗?',
					success:(async (rel)=>{
						if(rel.confirm){
							let data = await Api.apiCall('post',Api.apiName.remove_drag,{id:that.currrent_id});
							if(!data){
								return;
							}
							if(data.data==1){
								that.$api.msg(`删除成功`)
							}else{
								that.$api.msg(`删除失败`)
							}
							that.showOpMenu();
							that.resetListParam();
							that.loadList()
						}
					})
				})
			},
			toExport(){
				uni.navigateTo({
					url:'/pages/record/statics?id='+this.currrent_id
				})
			},
			async exportData(){
				let data = await Api.apiCall('post',Api.apiName.create_drag_export,{dragon_id:this.currrent_id});
				if(!data){
					this.$api.msg(`导出数据异常，请联系管理员`);
					return;
				}
				this.$api.msg(`导出成功`)
				this.showOpMenu();
				setTimeout(function(){
					uni.navigateTo({
						url:'/pages/record/export?id='+this.currrent_id+'&download='+data.data.url+'&name='+data.data.name
					})
				},1500)
			},
			editDrag(){
				uni.navigateTo({
					url:'/pages/index/edit'
				})
			},
			endDrag(){
				let that = this;
				uni.showModal({
					content:'确定结束该接龙活动吗?',
					success:(async (rel)=>{
						if(rel.confirm){
							let data = await Api.apiCall('post',Api.apiName.purchase_end,{id:that.currrent_id});
							if(!data){
								return;
							}
							that.showOpMenu();
							that.loadList()
						}
					})
				})
			},
		},

	}
</script>

<style lang='scss'>
	page{
		background: #F5F5F5;
	}
	.container{
		display: flex;
		flex-direction: column;
	}
	.share-btn{
		background-image: url('/static/temp/share_wechat.png');
		background-position: bottom;
		background-size: 80rpx 80rpx;
		height: 80rpx !important;
		line-height: 80rpx !important;
		background-repeat: no-repeat;
		width: 80rpx;
		border-radius: 50%;
	}
	button{
		/* background: none !important; */
		line-height: 39rpx !important;
		height: 39rpx !important;
		font-size: 28rpx !important;
		color:#333333 !important;
	}
	button::after{
		border: none !important;
	}
	.navbar{
		display: flex;
		height: 88rpx;
		padding:4rpx;
		position: relative;
		border-radius: 16rpx;
		margin: 10rpx 30rpx;
		z-index: 1;
		background: #FFFFFF;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: $font-base;
			color: $font-color-light;
			position: relative;
			padding: 20rpx;
			.child_item{
				color:#666666;
				&.current{
					color: $font-color-main;
					font-size: $font-base;
					border-bottom: 4rpx solid $font-color-main;
					&:after{
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 88rpx;
						height: 0;
					}
				}
			}
		}
	}
	.main{
		background: $back-hui;
	}
	.main-content{
		background: $back-white;
		/* height: 400rpx; */
		margin: 30rpx;
		border-radius:20rpx;
		padding-top: 10rpx;
	}
	
	.avatar{
		height: 140rpx;
		margin: 30rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		display: flex;
		image{
			width: 82rpx;
			height: 82rpx;
			border-radius: 50%;
		}
	}
	.left-avatar{
		display: flex;
		flex:1;
		align-items: center;
		margin-left: 20rpx;
	}
	.right-copy{
		margin:42rpx 20rpx;
		display: flex;
		align-items: center;
		color: $font-color-main;
		font-size: $font-sm;
		border: 1px solid $font-color-main;
		border-radius: 30rpx;
		padding: 6rpx 29rpx;
	}
	.name{
		margin-left:20rpx;
		font-size:28rpx;
	}
	.had{
		background: rgba(35,169,72,0.1);
		border:none;
		padding: 12rpx 33rpx;
	}
	
	.add_btn{
		color:$font-color-main;
		font-size: 28rpx !important;
	}
	.dingyue{
		margin-left: 6rpx;
	}
	.divider{
		height: 2rpx;
		background: $divider-color;
		opacity: 0.07;
		margin: 10rpx 20rpx;
	}
	.desc{
		color: $font-color-black;
		font-size: $font-lg;
		font-weight: $font-w-600;
		margin: 20rpx;
		/* height: 82rpx; */
		display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		
	}
	.price{
		display: flex;
		margin: 20rpx;
	}
	.price-detail{
		flex: 1;
		color: $font-color-yellow;
		font-size: $font-lg;
		font-weight: $font-w-600;
	}
	.price-time{
		color: $font-color-light;
		font-size: $font-base;
	}

	.img-list::-webkit-scrollbar {
		display: none;
	}
	.img-list {
	  width: 100%;
	  /* 设置图片容器的高度 */
	  /* height: 240rpx; */
	  overflow-x: auto; /* 横向滚动 */
	  white-space: nowrap; /* 确保图片在一行内水平排列 */
	}
	
	.img-container {
	  display: flex;
	  flex-direction: row;
	}
	
	.img-item {
	  margin:0rpx 16rpx; /* 图片之间的间距 */
	}
	
	.img {
	  width: 198rpx;
	  height: 198rpx;
	  border-radius: 20rpx;
	}
	.video{
		width: 198rpx;
		height: 198rpx;
		border-radius: 20rpx;
	}
	.player{
		position: absolute;
		top: 70rpx;
		left: 70rpx;
	}
	.danmu{
		height: 152rpx;
		overflow: hidden;
		margin: 24rpx;
		.danmu-list{
			display: flex;
			padding: 4rpx;
			animation: fadeIn 3s forwards;
			align-items: center;
			.danmu-nick{
				color: #000000;
				font-size: 24rpx;
				margin-left: 10rpx;
				width: 70rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap
			}
			.danmu-content{
				font-size: 24rpx;
				color:#000000;				
				margin-left: 20rpx;
				width: 270rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	@keyframes fadeIn {
			from { opacity: 0; }
			to { opacity: 1; }
	}
	.bottom-show{
		display: flex;
		align-items: center;
	}
	.bottom-status{
		flex: 1;
		margin-left: 20rpx;
		font-size: $font-base;
	}
	.bottom_menu{
		position: fixed;
		bottom: 0rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		width: 100%;
		background: #FFFFFF;
		z-index: 3;
	}
	.share-list{
		display:flex;
		flex-wrap: wrap;
		background: #FFFFFF;
		margin-bottom: 100rpx;
		justify-content: center;
	}
	.share-item{
		min-width: 50%;
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 180upx;
		image{
			width: 80upx;
			height: 80upx;
			margin-bottom: 16upx;
		}
		text{
			font-size: $font-base;
			color: #333333;
			margin-top: 10rpx;
		}
	}
	.bottom-btn-share{
		position:absolute;
		left: 0;
		bottom: 0;
		display:flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 90upx;
		background: #fff;
		z-index: 9;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
	}
	.cpt-mask{
		top:0rpx !important;
		background-color: rgba(0,0,0,1) !important;  
		/* 查看视频的时候用1遮挡 */
		/* opacity: 1 !important;  */ 
		opacity: 0.5 !important;  
		z-index: 3 !important;  
	}
	.op_menu_child{
		text-align: center;
		padding: 30rpx;
		border-bottom: 1px solid rgba(204,204,204,0.2);
	}
	.share_card{
		position: fixed;
		top: 5%;
		left: 0;
		right: 0;
		z-index: 3;
		background: #FFF;
		margin: 30rpx;
		border-radius: 10rpx;
	}
</style>
